@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.branding {
  box-sizing: border-box;
  height: $sm-logo-height;
  overflow: hidden;
  @include transition(all, 0.5s, linear);

  @media (min-width: $sm) {
    width: 100%;
    padding: $padding;
    height: $logo-height;
  }

  img {
    max-height: 100%;
    max-width: 100%;

    // For some reason without this IE9 flips out and stretches the images.
    width: auto;
    height: auto;
  }
}
